<template>
  <el-dialog
    v-model="dialogVisible"
    class="layer-info-dialog"
    title="图层详情"
    width="600px"
    draggable
    :before-close="closeDialog"
  >
    <el-scrollbar class="layer-info-scrollbar" max-height="500px">
      <div v-if="currentLayerInfo.featureType">
        <el-descriptions class="margin-top" title="基础信息" :column="2" size="small">
          <el-descriptions-item label="名称">{{
            currentLayerInfo.featureType.name
          }}</el-descriptions-item>
          <el-descriptions-item label="原名">{{
            currentLayerInfo.featureType.nativeName
          }}</el-descriptions-item>
          <el-descriptions-item label="标题">{{
            currentLayerInfo.featureType.title
          }}</el-descriptions-item>
          <el-descriptions-item label="概要">{{
            currentLayerInfo.featureType.abstract
          }}</el-descriptions-item>
          <el-descriptions-item label="投影坐标">{{
            currentLayerInfo.featureType.srs
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="数据坐标四至" :column="2" size="small" border>
          <el-descriptions-item label="xmin">{{
            currentLayerInfo.featureType.nativeBoundingBox?.minx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymin">{{
            currentLayerInfo.featureType.nativeBoundingBox?.miny
          }}</el-descriptions-item>
          <el-descriptions-item label="xmax">{{
            currentLayerInfo.featureType.nativeBoundingBox?.maxx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymax">{{
            currentLayerInfo.featureType.nativeBoundingBox?.maxy
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="投影坐标四至" :column="2" size="small" border>
          <el-descriptions-item label="xmin">{{
            currentLayerInfo.featureType.latLonBoundingBox?.minx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymin">{{
            currentLayerInfo.featureType.latLonBoundingBox?.miny
          }}</el-descriptions-item>
          <el-descriptions-item label="xmax">{{
            currentLayerInfo.featureType.latLonBoundingBox?.maxx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymax">{{
            currentLayerInfo.featureType.latLonBoundingBox?.maxy
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="字段信息" :column="3" size="small" border v-if="currentLayerInfo.featureType.attributes && currentLayerInfo.featureType.attributes.attribute">
          <template v-for="fieldItem in currentLayerInfo.featureType.attributes.attribute">
            <el-descriptions-item label="名称">{{
              fieldItem.name
            }}</el-descriptions-item>
            <el-descriptions-item label="类型">{{
              fieldItem.binding
            }}</el-descriptions-item>
            <el-descriptions-item label="允许为空">{{
              fieldItem.nillable
            }}</el-descriptions-item>
          </template>
        </el-descriptions>
      </div>
      <div v-else-if="currentLayerInfo.coverage">
        <el-descriptions class="margin-top" title="基础信息" :column="2" size="small">
          <el-descriptions-item label="名称">{{
            currentLayerInfo.coverage.name
          }}</el-descriptions-item>
          <el-descriptions-item label="原名">{{
            currentLayerInfo.coverage.nativeName
          }}</el-descriptions-item>
          <el-descriptions-item label="标题">{{
            currentLayerInfo.coverage.title
          }}</el-descriptions-item>
          <el-descriptions-item label="投影坐标">{{
            currentLayerInfo.coverage.srs
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="数据坐标四至" :column="2" size="small" border>
          <el-descriptions-item label="xmin">{{
            currentLayerInfo.coverage.nativeBoundingBox?.minx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymin">{{
            currentLayerInfo.coverage.nativeBoundingBox?.miny
          }}</el-descriptions-item>
          <el-descriptions-item label="xmax">{{
            currentLayerInfo.coverage.nativeBoundingBox?.maxx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymax">{{
            currentLayerInfo.coverage.nativeBoundingBox?.maxy
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="投影坐标四至" :column="2" size="small" border>
          <el-descriptions-item label="xmin">{{
            currentLayerInfo.coverage.latLonBoundingBox?.minx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymin">{{
            currentLayerInfo.coverage.latLonBoundingBox?.miny
          }}</el-descriptions-item>
          <el-descriptions-item label="xmax">{{
            currentLayerInfo.coverage.latLonBoundingBox?.maxx
          }}</el-descriptions-item>
          <el-descriptions-item label="ymax">{{
            currentLayerInfo.coverage.latLonBoundingBox?.maxy
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="字段信息" :column="3" size="small" border v-if="currentLayerInfo.coverage.attributes && currentLayerInfo.coverage.attributes.attribute">
          <template v-for="fieldItem in currentLayerInfo.coverage.attributes.attribute">
            <el-descriptions-item label="名称">{{
              fieldItem.name
            }}</el-descriptions-item>
            <el-descriptions-item label="类型">{{
              fieldItem.binding
            }}</el-descriptions-item>
            <el-descriptions-item label="允许为空">{{
              fieldItem.nillable
            }}</el-descriptions-item>
          </template>
        </el-descriptions>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, toRef, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useLayerEditModal } from '../hooks'
import { restHelperInstance } from '@/composables/useGeoHelper'
import type { ILayer } from 'geoserver-helper/interface'

// 图层编辑相关hook
const layerEditModal = useLayerEditModal()
//当前编辑图层
const currentEditLayer = layerEditModal.currentEditLayer

//当前图层详情
const currentLayerInfo = ref<ILayer.LayerSourceDetailInfo>({})
const mapUrl = import.meta.env.VITE_MAP_SERVER_URL
interface emitInterface {
  (e: 'update:visible', v: boolean): void
}

const dialogVisible = layerEditModal.detailVisible

const closeDialog = () => {
  dialogVisible.value = false
}
/**
 * @description: 初始化图层属性表信息
 * @return {*}
 */
const initLayerInfo = () => {
  if (currentEditLayer.value) {
    const queryUrl = `${mapUrl}/${currentEditLayer.value.resource.href.substr(currentEditLayer.value.resource.href.indexOf('/rest'))}`
    restHelperInstance
      .getLayerSourceInfoByHrefApi(queryUrl)
      .then((res) => {
        if (res && (res.coverage || res.featureType)) {
          currentLayerInfo.value = res
        } else {
          ElMessage.warning('当前图层不支持属性查看')
        }
      })
      .catch(() => {
        ElMessage.warning('图层详情获取失败')
      })
  }
}
watch(
  () => dialogVisible.value,
  () => {
    if (dialogVisible.value) {
      initLayerInfo()
    }
  },
  {
    immediate: true,
  },
)
onBeforeMount(() => {})
</script>

<style lang="scss">
.layer-info-dialog {
  .el-dialog__body {
    padding: 10px 20px;
    .layer-info-scrollbar {
      max-height: 500px;
      .el-descriptions{
        .el-descriptions__header{
          margin-top: 6px;
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>
